<template>
    <el-container class="systemConfig">
        <el-aside width="200px" class="robotAside">
            <el-scrollbar style="height: 100%">
                <menu-list :menuList="menuArr" rootPath="robotReport" />
            </el-scrollbar>
        </el-aside>
        <el-main class="robotMain reportMain">
            <router-view :key="$route.path"></router-view>
        </el-main>
    </el-container>
</template>

<script>
import menuList from "@/components/menuList";
export default {
    name: "robotReport",
    data() {
        return {
            menuArr: [
                {
                    name: "数据看板",
                    menuCode: "M16",
                    children: [
                        {
                            name: "运营关键数据",
                            menuCode: "M41",
                            path: "/robotReport/operationData",
                        },
                        {
                            name: "聊天日志数据",
                            menuCode: "M42",
                            path: "/robotReport/chatLog",
                        }
                    ],
                },
                {
                    name: "访客统计",
                    menuCode: "M17",
                    children: [
                        {
                            name: "来访数据统计",
                            menuCode: "M43",
                            path: "/robotReport/visitStatis",
                        }
                    ],
                },
                {
                    name: "知识库统计",
                    menuCode: "M18",
                    children: [
                        {
                            name: "知识库数据统计",
                            menuCode: "M44",
                            path: "/robotReport/knowledgeStatis",
                        },
                        {
                            name: "热点问题统计",
                            menuCode: "M45",
                            path: "/robotReport/hotIssuesStatis",
                        }
                    ],
                },
                {
                    name: "问答统计",
                    menuCode: "M19",
                    children: [
                        {
                            name: "问题数据统计",
                            menuCode: "M46",
                            path: "/robotReport/problemData",
                        },
                        {
                            name: "满意度统计",
                            menuCode: "M47",
                            path: "/robotReport/satisfyStatistics",
                        }
                        ,
                        {
                            name: "转人工分析",
                            menuCode: "M48",
                            path: "/robotReport/turnAgentAnalyze",
                        }
                    ],
                },
            ],
        };
    },
    methods: {
    },
    created() {
    },
    watch: {
        '$route.path'() {
            var el = document.querySelector(".reportMain");
            if (el) {
                el.scrollTop = 0;
            }
        }
    },
    components: {
        menuList,
    },
};
</script>

<style lang="scss">
.reportMain {
    background: #e7edf6;
    padding: 0;
    .header {
        min-height: 60px;
        padding: 10px 20px;
        background: #fff;
        border-radius: 20px;
        margin-bottom: 15px;
        flex-wrap: wrap;
        color: #363c43;
        position: relative;
        .flex-center {
            display: flex;
            align-items: center;
        }
        .el-date-editor {
            width: 270px;
        }
        .title {
            font-size: 16px;
            color: #363c43;
            margin-right: 20px;
            flex-shrink: 0;
        }
        .hint {
            color: #90979d;
            flex-shrink: 0;
        }
        .el-radio-group {
            flex-shrink: 0;
            .el-radio-button--small .el-radio-button__inner {
                width: 80px;
                font-size: 14px;
            }
        }
        .mr20 {
            flex-shrink: 0;
        }
        .ant-select-selection--multiple {
            height: 34px;
            overflow-y: scroll;
        }
    }
    .card {
        padding: 20px;
        background: #fff;
        border-radius: 20px;
        .card-header {
            margin-bottom: 20px;
            .title {
                font-size: 16px;
                color: #363c43;
                line-height: 34px;
            }
            .icon-xiazai {
                font-size: 24px;
                color: #b7c1c9;
                background: #f5f7fa;
                border-radius: 6px;
                padding: 5px;
                cursor: pointer;
                margin-left: 20px;
                height: 34px;
                line-height: 22px;
                &:hover {
                    background: #eaeef4;
                    color: #abb4bc;
                }
            }
        }
    }
    .betweenCard {
        > .card {
            flex-shrink: 0;
            width: calc(50% - 10px);
        }
        .topCount {
            width: 30%;
            flex-shrink: 0;
            color: #676e75;
            .title {
                font-size: 16px;
                margin-bottom: 25px;
            }
            .item {
                position: relative;
                font-size: 14px;
                padding-bottom: 16px;
                padding-left: 30px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                .iconfont {
                    position: absolute;
                    left: -5px;
                    font-size: 30px;
                    line-height: 28px;
                }
                .paiming0 {
                    color: #f4dc00;
                }
                .paiming1 {
                    color: #c6cbcc;
                }
                .paiming2 {
                    color: #efbe69;
                }
            }
        }
    }
}
</style>